<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  
  <title>数据可视化</title>

  <!-- Favicons -->

  <!--external css-->
  <link href="/static/lib/font-awesome/css/font-awesome.css" rel="stylesheet" />
 
  <link rel="stylesheet" type="text/css" href="/static/lib/gritter/css/jquery.gritter.css" />
  <!-- Custom styles for this template -->
  <link href="/static/css/style.css" rel="stylesheet">
  <link href="/static/css/style-responsive.css" rel="stylesheet">
   <script src="/static/lib/jquery/jquery.min.js"></script>
  <script type="text/javascript" src="/static/js/echarts.min.js"></script>
    
  
</head>

<body>
  <section id="container1">
   
    <header class="header black-bg">
      <div class="sidebar-toggle-box">
        <div class="fa fa-bars tooltips" data-placement="right"  data-original-title="Toggle Navigation">
         
        </div>
      </div>
      <!--logo start-->
      <a href="index.html" class="logo"><b>BIG<span>DATA</span></b></a>
     <div class="top-menu">
      <ul class="nav pull-right top-menu">
        <li>
          <a class="login" href="/login">登录</a>
          <a class="register" href="/register">注册</a>
         
        </li>
      </ul>
    </div>
    </header>
   
    <aside>
      <div id="sidebar" class="nav-collapse ">
        <!-- sidebar menu start-->
        <ul class="sidebar-menu" id="nav-accordion">
          <p class="centered"><img src="/static/img/qidi.jpg" class="img-circle" width="80"></p>
          <h5 class="centered">还没想好小组</h5>
          <li class="mt">
            <a class="" href="/index">
              <i class="fa fa-dashboard"></i>
              <span>主页面</span>
              </a>
          </li>
         
          <li class="sub-menu">
            <a class="active" href="javascript:;">
              <i class="active" fa fa-bar-chart-o"></i>
              <span>Charts</span>
              </a>
            <ul class="sub">
        <!-- <li><a href="/">主页面</a></li> -->
              <li><a href="/location">地区分布</a></li>
              <li><a href="/users_count">用户数量统计</a></li>
              <li><a href="/relation">用户关系</a></li>
              <li><a href="/occupation">职业群体分布</a></li>
                <li><a href="/school">教育学校分布</a></li>
              <li><a href="/topic">话题分布</a></li>
              <li><a href="/gender">性别比例分布</a></li>
             
            </ul>
          </li>
          <li class="sub-menu">
            <a class="" href="javascript:;">
              <i class="active" fa fa-bar-chart-o"></i>
              <span>Person</span>
              </a>
             <ul class="sub">
     
              <li><a href="/persion">个人用户画像</a></li>
              </ul>
          </li>

          <li class="sub-menu">
            <a href="javascript:;">
              <i class="fa fa-book"></i>
              <span>其它</span>
              </a>
             <ul class="sub">
              <li><a href="/login">登录</a></li>
              <li><a href="/register">注册</a></li>
              <li><a href="404.html">404 Error</a></li>
              <li><a href="500.html">500 Error</a></li>
            </ul>
          </li>
          
        </ul>
        <!-- sidebar menu end-->
      </div>
    </aside>
    
    <!--main content start-->
    <section id="main-content">
      <section class="wrapper">
        <br>
        <br>
     <div id="school" style="width:40%px;height:550px;"></div>
      <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        function loadColumn(){
           var myChart = echarts.init(document.getElementById('school'));
           //显示标题，图例和空的坐标轴
           myChart.setOption({
             color:['#ff7d27','#47b73d', '#57a2fd','#FFB6C1','#DC143C','#FFF0F5','#FF69B4','#D8BFD8','#FF00FF','#8B008B'],//饼图颜色
             title : {
                 text: '学校群体分析前十个',
                 // subtext: '纯属虚构',
                 x:'center'
                 
              },
              tooltip : {
                 trigger: 'item',
                 formatter: "{a} <br/>{b} : {c} ({d}%)"
              },
              legend: {
                  orient: 'vertical',
                  left: 'left',
                  data: ['清华大学','北京大学','浙江大学','复旦大学','中山大学','武汉大学','上海交通大学','华中科技大学','南京大学','中国人民大学']
              },
              toolbox:{
                  show:true,
                  feature:{
                    mark:{show:true},
                    dataView:{show:true,readOnly:false},
                    magicType:{
                      show:true,
                      type:['pip','gunnel'],
                      option:{
                        funnel:{
                          x:'25%',
                          width:'40%',
                          funnelAlign:'left',
                        }
                      }
                    },
                    restore:{show:true},
                    saveAslmage:{show:true}
                  }
                },
                series : [{
                    name: '数据来源：china_education',
                    type: 'pie',
                    radius : '55%',
                    center: ['55%', '55%'],
                    data:[]
                }]
           });
           myChart.showLoading();//数据加载完之前先显示一段简单的loading动画
           var names=[];//类别数组{用于存放饼图的类别}
           var brower=[];
           $.ajax({
             type: 'get',
             url: 'static/json/china_education.txt',//请求数据的地址
             dataType: "json",        //返回数据形式为json
             success: function (result) {
           $.each(result.list, function (index, item) {
              names.push(item.省份);    //挨个取出类别并填入类别数组 
              brower.push({
              name: item.学校,
              value: item.数量
                  });
               });
            myChart.hideLoading();    //隐藏加载动画
            myChart.setOption({        //加载数据图表                
                legend: {                    
                    data: names
                },
                series: [{                    
                    data: brower
                }]
              });
            },
          error: function (errorMsg) {
            //请求失败时执行该函数
            alert("图表请求数据失败!");
            myChart.hideLoading();
        }
    });
};
loadColumn();
</script>
<br>
<br>
      </section>
    </section>
    <!--main content end-->
    <!--footer start-->
    <footer class="site-footer">
      <div class="text-center">
        <p align="center">
          &copy;<strong>Big data</strong>&nbsp;&nbsp;.&nbsp;&nbsp;还没想好小组
        </p>
       
        <a href="/school" class="go-top">
          <i class="fa fa-angle-up"></i>
          </a>
      </div>
    </footer>
    <!--footer end-->
  </section>
  <!-- js placed at the end of the document so the pages load faster -->
 

  <script src="/static/lib/bootstrap/js/bootstrap.min.js"></script>
  <script class="include" type="text/javascript" src="/static/lib/jquery.dcjqaccordion.2.7.js"></script>
  <script src="/static/lib/jquery.scrollTo.min.js"></script>
  <script src="/static/lib/jquery.nicescroll.js" type="text/javascript"></script>
  <!-- <script src="/static/lib/jquery.sparkline.js"></script> -->
  <!--common script for all pages-->
  <script src="/static/lib/common-scripts.js"></script>
  <script type="text/javascript" src="/static/lib/gritter/js/jquery.gritter.js"></script>
  <script type="text/javascript" src="/static/lib/gritter-conf.js"></script>
  <!--script for this page-->
 

 
 
</body>

</html>
